<template>
	<view :style="{paddingTop:0+'px'}">
<!-- 		<scroll-view scroll-x="true" style="width: 750rpx;">
			<view class="tlist">
				<view class="tlist__item" @click="updateType(0)">
					<image :src="'https://fen.fuliaoxx.com/img/new/find/t'+0+'.png'" class="tlist__item__icon" mode="">
					</image>
					<text class="tlist__item__text">
						全部
					</text>
				</view>
				<view class="tlist__item" v-for="(item,index) in typeLists" :key="index" @click="updateType(item.id)"
					v-if="isShow || index<4">
					<image :src="$wanlshop.oss(item.image, 100, 100, 1)" mode="" class="tlist__item__icon"></image>
					<text class="tlist__item__text">
						{{item.name}}
					</text>
				</view>

				<view class="tlist__item" @click="isShow=!isShow">
					<image src="https://fen.fuliaoxx.com/img/new/home/t11.png" mode="" class="tlist__item__icon">
					</image>
					<text class="tlist__item__text">
						{{isShow?'收起':'展开'}}
					</text>
				</view>
			</view>
		</scroll-view> -->
		
		
		<view class="tab">
			
			<u-grid :border="false" col="6" >
				<u-grid-item @click="updateType(0)">
					<image src="https://fen.fuliaoxx.com/img/new/home/t0.png" class="tab__item__icon" mode="">
					</image>
					<text class="tab__item__text">{{$getText('全部')}} </text>
				</u-grid-item>
				<u-grid-item v-for="(listItem,listIndex) in typeLists" :key="listIndex"
					@click="updateType(listItem.id)"
					v-if="listIndex<=4 || isShow">
					<image :src="$wanlshop.oss(listItem.image, 100, 100, 1)" class="tab__item__icon" mode="">
					</image>
					
					<text class="tab__item__text">{{language==1? listItem.hname:language==2? listItem.wname: listItem.name }}</text>
				</u-grid-item>
			</u-grid>
			<view class="" style="display: flex;justify-content: center;padding-top: 4rpx;flex-direction: row;"
				@click="isShow = !isShow">
				<u-icon name="arrow-down" color="#000000" style="justify-content: center;" size="16" v-if="!isShow"></u-icon>
				<u-icon name="arrow-up" color="#000000"  style="justify-content: center;" size="16" v-else></u-icon>
			</view>
		</view>
		<scroll-view class="" :scroll-y="true" enable-back-to-top enable-flex="true"
			style="background-color: #fafafa;height: calc(100vh - 200px);" @scrolltolower="handleLower">

			<view class="list" v-if="dataList.length > 0">
				<view class="item" v-for="(item, index) in dataList" :key="index">
					<view v-if="item.state === 'normal'" class="examine radius-bock" :style="{
							backgroundImage:
								'url(' + $wanlshop.oss(item.images[0], 200, 0) + ')'
						}" @tap="onFind(item)">
						<view class="cover radius-bock" :style="{
								backgroundImage:
									'url(' + $wanlshop.oss(item.images[0], 200, 0) + ')'
							}" />
						<view v-if="item.type === 'video'" class="state padding-sm text-xxxl">
							<text class="wlIcon-video" />
						</view>
					</view>
					<view v-else class="examine radius-bock"
						@tap="$wanlshop.msg(`内容${stateText[item.state].text}, 无法查看`)">
						<view class="cover" :style="{
								backgroundImage:
									'url(' + $wanlshop.oss(item.images[0], 200, 0) + ')'
							}" />
						<view class="state flex justify-center align-center">
							<view v-if="item.state" class="text-xxl text-center"
								:style="{ color: stateText[item.state].color }">
								<text :class="stateText[item.state].icon" />
								<view class="text-df">
									{{ stateText[item.state].text }}
								</view>
							</view>
						</view>
					</view>
					<view class="padding-xs  text-bold5">
						<view class="text-cut-2">
							<view class="cu-tag sm radius margin-right-xs" :class="[typeList[item.type]]">
								{{ item.type_text }}
							</view>
							{{ formatHtml(item.content) }}
						</view>
					</view>
					<view class="flex wanl-gray text-min padding-lr-xs justify-between" style="flex-direction: row;">
						<view>
							<text>
								{{ $wanlshop.timeFormat(item.createtime, 'mm-dd') }} {{$getText('发布')}} 
							</text>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;"
							:class="{ 'text-red': item.isLike === 1 }" @tap="handleLike(index)">
							<text :class="[
									item.isLike === 1 ? 'wlIcon-yiguanzhu1' : 'wlIcon-likes'
								]"></text>
							<text class="margin-left-xs">{{ item.likes }}</text>
						</view>
					</view>
				</view>
			</view>
			<view v-else>
				<u-empty :text=" $getText('暂无数据')"></u-empty>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		
	} from 'vuex';
	export default {
		name: "shopping",
		
		data() {
			return {
				dataList: [],
				isShow: false,
				typeList: {
					new: 'bg-gradual-yellow',
					live: 'wanl-bg-orange',
					want: 'bg-gradual-green',
					activity: 'bg-gradual-orange',
					show: 'wanl-bg-pink',
					video: 'wanl-bg-pink'
				},
				typeLists: [],
				type_id: 0,
				language:uni.getStorageSync('language')
			};
		},
		props: {
			top: {
				type: Number,
				default: 0
			},
			height: {
				type: Number,
				default: 0
			},
			width: {
				type: Number,
				default: 0
			},
		},
		watch: {
			type_id: {
				handler(val) {
					this.loadData()
				},
				immediate: true
			}
		},
	
		mounted() {
			this.getTypeList()
			this.updateType(0)
		},
		methods: {
			changeLan(){
				this.language=uni.getStorageSync('language')
			},
			updateType(val) {
				this.type_id = val
				this.loadData()
				this.isShow=false
			},
			formatHtml(content) {
				return content.replace(/<\/?.+?>/g, '').replace(/ /g, '');
			},
			onFind(item) {
				uni.navigateTo({
					url: "/pages/apps/find/details/video2?id=" + item.id + "&type_id=" + (this.type_id ? item
						.type_id : '')
				})
			},
			async getTypeList() {
				await uni.request({
					url: "/index/typeList",
					complete: (res) => {
						this.typeLists = res.data
					}
				})
			},
			loadData() {
				uni.request({
					url: "/wanlshop/find/find/getList?type=video" + (this.type_id ? '&type_id=' + this.type_id :
						''),
					success: (res) => {
						const {
							data
						} = res.data
						this.dataList = data
						// this.dataList =this.dataList.concat(this.dataList)
						console.log(data)
					}
				})
			},
			handleUpper() {},
			handleLower() {}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0 16rpx;
		justify-content: space-between;

		.item {
			margin-bottom: 40rpx;
			flex: 0 0 calc((100% - 16rpx) / 2);
			overflow: hidden;

			.examine {
				height: 460rpx;
				position: relative;

				.cover {
					height: 460rpx;
					background-size: cover;
					background-position: center;
					background-repeat: no-repeat;
				}

				.state {
					position: absolute;
					top: 0;
					right: 0;
					left: 0;
					bottom: 0;
					background-color: rgba(0, 0, 0, 0.2);
				}
			}
		}
	}

	.text-cut-2 {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.cu-tag {
		font-size: 12px;
		vertical-align: middle;
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0px 8px;
		height: 24px;
		font-family: Helvetica Neue, Helvetica, sans-serif;
		white-space: nowrap;
	}

	.cu-tag.sm {
		font-size: 10px;
		padding: 0px 6px;
		height: 16px;
	}

	.tlist {
		padding: 0 22rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 212rpx;
		width: fit-content;
	}

	.tlist__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 41rpx;
	}

	.tlist__item__icon {
		width: 100rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		margin-bottom: 12rpx
	}

	.tlist__item__text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		line-height: 33rpx;
	}
	.tab {
		margin-top: 20rpx;
	
		&__item {
			display: flex;
			flex-direction: column;
			align-items: center;
	
			&__icon {
				width: 82rpx;
				height: 82rpx;
			}
	
			&__text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				line-height: 33rpx;
				margin-top: 6rpx;
				margin-bottom: 20rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 100rpx;
				text-align: center;
			}
		}
	}
</style>